<template>
  <div class="page">
    <!-- 标题栏开始 -->
    <div class="header">
      <div class="iconfont hico">&#xe603;</div>
      <div class="title">小U商城</div>
      <!-- 小U商城 -->
      <div class="hr"></div>
    </div>
    <!-- 标题栏结束 -->
    <!-- 导航栏 -->
    <div class="nav">
      <!-- 搜索栏开始 -->
      <div class="ntop">
        <div class="iconfont nico">&#xe611;</div>
        <img src="../assets/img/pic/logo/white.png" alt="" />
        <div class="inner">
          <span class="iconfont nico2">&#xe637;</span>
          <input type="text" class="input" placeholder="按内容搜索" />
        </div>
        <span class="iconfont nico1">&#xe660;</span>
      </div>
      <!-- 搜索栏结束 -->
      <!-- 导航栏开始 -->
      <div class="navbt">
        <ul>
          <li class="active">
            <div>推荐</div>
            <div class="inner1"></div>
          </li>
          <li>
            <div>女鞋</div>
            <div></div>
          </li>
          <li>
            <div>鞋包</div>
            <div></div>
          </li>
          <li>
            <div>居家</div>
            <div></div>
          </li>
          <li>
            <div>母婴</div>
            <div></div>
          </li>
          <li>
            <div>美妆</div>
            <div></div>
          </li>
        </ul>
        <div class="nbr"><span class="iconfont">&#xeaf1;</span> 分类</div>
      </div>
    </div>
    <!-- 热点 -->
    <div class="banner">
      <div class="images">
        <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
          <van-swipe-item v-for="item in bannerlist" :key="item.id">
            <img :src="$imgUrl + item.img" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="hot">
        <ul>
          <li>
            <img src="../assets/img/icon/index/kingkong/seckill.png" alt="" />
            <p>限时秒杀</p>
          </li>
          <li>
            <img src="../assets/img/icon/index/kingkong/top.png" alt="" />
            <p>畅销商品</p>
          </li>
          <li>
            <img src="../assets/img/icon/index/kingkong/brand.png" alt="" />
            <p>品质大牌</p>
          </li>
          <li>
            <img
              src="../assets/img/icon/index/kingkong/selfsupport.png"
              alt=""
            />
            <p>小U自营</p>
          </li>
          <li>
            <img src="../assets/img/icon/index/kingkong/integral.png" alt="" />
            <p>积分商城</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 主体 -->
    <div class="main">
      <div class="mleft">
        <div class="mlt">
          <h2>限时秒杀</h2>
          <a href="javascript:;">
            <span class="iconfont">查看更多&#xe62b;</span>
          </a>
        </div>
        <div class="mlp">每天0点场，好货秒不停</div>
        <div class="mltime">
          <ul>
            <li>05</li>
            <li>:</li>
            <li>20</li>
            <li>:</li>
            <li>48</li>
          </ul>
        </div>
      </div>
      <div class="mright">
        <div class="mrtop">
          <h2>品牌上新</h2>
          <p>
            <span>9点整,抢大牌</span>
          </p>
          <div class="mrtb">
            <span class="mrtbs">疯抢红包</span>
            <span class="iconfont mrspan">&#xe62b;</span>
          </div>
        </div>
        <div class="mrtop mrbtm">
          <h2>日用红包</h2>
          <p>
            <span>愿君多采撷</span>
          </p>
          <div class="mrtb">
            <span class="mrtbs">塞满奖券</span>
            <span class="iconfont mrspan">&#xe62b;</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <!-- <router-view></router-view> -->
      <!-- <v-list></v-list> -->
      <van-tabs type="card">
        <van-tab title="全部商品">
          <van-card
            v-for="item in allArr"
            :key="item.id"
            num="1"
            :price="item.price | toPrice"
            :title="item.goodsname"
            :thumb="$imgUrl + item.img"
            :origin-price="item.market_price | toPrice"
            @click="toDetail(item.id)"
          />
        </van-tab>
        <van-tab title="只看新品">
          <van-card
            v-for="item in newArr"
            :key="item.id"
            num="1"
            :price="item.price | toPrice"
            :title="item.goodsname"
            :thumb="$imgUrl + item.img"
            :origin-price="item.market_price | toPrice"
             @click="toDetail(item.id)"
          />
        </van-tab>
        <van-tab title="只看热卖">
          <van-card
            v-for="item in hotArr"
            :key="item.id"
            num="1"
            :price="item.price | toPrice"
            :title="item.goodsname"
            :thumb="$imgUrl + item.img"
            :origin-price="item.market_price | toPrice"
             @click="toDetail(item.id)"
          />
        </van-tab>
      </van-tabs>
    </div>
    <v-nav></v-nav>
  </div>
</template>

<script>
import { getBanner, getGoods,getseckill } from "./util/axios";
// import Swiper from "swiper";
import vList from "./list/list";
import vNav from "./vNav";
export default {
  data() {
    return {
      //轮播图数据
      bannerlist: [],
      //新品商品
      newArr: [],
      //热卖商品
      hotArr: [],
      //全部商品
      allArr: [],
    };
  },
  components: {
    vList,
    vNav,
  },
  mounted() {
    getBanner().then((res) => {
      if (res.code == 200) {
        this.bannerlist = res.list;
      }
    });
    getGoods().then((res) => {
      if (res.code == 200) {
        let list = res.list ? res.list : [];
        this.allArr = list[2].content;
        this.newArr = list[0].content;
        this.hotArr = list[1].content;
      }
    });
    // getseckill().then(res=>{
    //   // console.log(res);
    // })     
     },
  methods:{
      toDetail(id){
          this.$router.push("/detail/"+id)
      }
  }
};
</script>

<style src="../assets/css/layout.css" scoped>
</style>